import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarousel from '@/components/carousel/index.vue'
import XtxMore from '@/components/more/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defineImg from '@/assets/images/200.png'
import {App}from 'vue'
import XtxBread from '@/components/bread/index.vue'
import XtxBreadItem from '@/components/bread/item.vue'
import XtxCity from '@/components/city/index.vue'
import XtxNumbox from '@/components/XtxNumbox/index.vue'
import XtxButton from '@/components/button/index.vue'
export default {
    //Vue2:传入vue对象
    //Vue3:传入app对象
    install(app:App){
        //自动执行,全局注册组件
        app.component('XtxSkeleton',XtxSkeleton)
        app.component('XtxCarousel',XtxCarousel)
        app.component('XtxMore',XtxMore)
        app.component('XtxBread',XtxBread)
        app.component('XtxBreadItem',XtxBreadItem)
        app.component('XtxCity', XtxCity)
        app.component('XtxNumbox', XtxNumbox)
        app.component('XtxButton', XtxButton)

        //全局注册指令
        //参数1:指令名
    app.directive('lazy',{
        mounted(el,binding){
        //el:当前绑定的dom元素
        useIntersectionObserver(el,([{isIntersecting}])=>{
            if(isIntersecting){
             el.src=binding.value
            }
        })
        //对图片的错误进行处理
        el.onerror=()=>{
         el.src=defineImg
        }
       }
      })
    }
}